<script setup>
import { ipcRenderer } from 'electron'

const setMinWindow = () => {
  ipcRenderer.send('set-min-window')
}
const setCloseWindow = () => {
  ipcRenderer.send('set-close-window')
}
</script>

<template>
  <div class="box">
    <div class="drag" style="width: 100%;height: 30px;background-color: #fff;">
      <div style="flex: 1;"></div>
      <div style="display: flex;">
        <button class="app-btn min-bt" @click="setMinWindow">-</button>
        <button class="closeBtn app-btn " @click="setCloseWindow">x</button>
      </div>
    </div>
    <router-view style="flex: 1;"></router-view>
  </div>
</template>

<style lang="scss" scoped>
.box {
  // width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .drag {
    -webkit-app-region: drag;
    display: flex;

  }
}

#app {
  width: 100%;
  height: 100%;
}


.app-btn {
  height: 100%;
  width: 30px;
  border: none;
  background-color: #fff;
  outline: none;
  // line-height: 100%;
  // text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.min-bt:hover {
  background-color: #f0eeee;
}

// .closeBtn {
//   height: 100%;
//   width: 30px;
//   border: none;
//   background-color: #fff;
//   outline: none;
// }

.closeBtn:hover {

  background-color: red;

}
</style>
